
<template>
    <div id="out_money_num">
        <h1 class="top_name">出金统计</h1>
        <div>
            <div class="condition">
                <div class="search-text">
                    <label>团队：</label>
                    <el-select v-model="team_id" placeholder="请选择">
                        <el-option
                                v-for="item in team_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <label>日入金：</label>
                    <el-date-picker
                            v-model="day"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择时间">
                    </el-date-picker>
                    <label>周入金：</label>
                    <el-select v-model="week" placeholder="请选择">
                        <el-option
                                v-for="item in week_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <label>月入金：</label>
                    <el-select v-model="month" placeholder="请选择">
                        <el-option
                                v-for="item in month_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-button">
                    <el-button type="primary" @click="getOutMoneyData()">搜索</el-button>
                    <el-button type="primary" @click="reset()">重置</el-button>
                    <el-button type="primary" @click="exportExcel()">导出</el-button>
                </div>
            </div>



        </div>
        <OutoMoneyNumTab class="user_table" :tableData="datalist"
        ></OutoMoneyNumTab>
    </div>
</template>

<script>
    import OutoMoneyNumTab from "@/components/OutMoneyNumTab.vue";
    export default {
        name: 'IntoMoneyNum',
        data(){
            return{
                datalist:[{
                    team_name: '团队1',
                    time: '2019-06-01',
                    into_type: '日入金',
                    into_money: '500000',
                    com_type: '方式1',
                }],
                day_list: [{
                    value: '选项1',
                    label: 'day1'
                }],
                team_list: [{
                    value: '选项1',
                    label: '团队1'
                }],
                week_list:[{
                    value: '选项1',
                    label: '第一周'
                }],
                month_list:[{
                    value: '选项1',
                    label: '第一月'
                }],
                team_id:'',
                month:'',
                week:'',
                day:''

            }
        },
        mounted() {
            this.getOutMoneyData();
        },
        components:{
            OutoMoneyNumTab
        },
        methods:{
            getOutMoneyData(){
                this.$store.commit("changeLoading",true)
                this.$api.getOutMoneyData().then((res)=>{
                    // this.datalist=res.data; // 处理数据
                    this.$store.commit("changeLoading",false)
                },(err)=>{
                    this.$message.error(err.msg)
                })

            },
            getSearch(){ // 搜索

            },
            reset(){ // 重置
                this.team_id='';
                this.year='';
                this.week='';
                this.day='';
            },
            exportExcel(){ // 导出

            },
        }
    }
</script>
<style scoped>
    .top_name{
        text-align: left;
        padding-left: 10px;
        font-size: 0.9rem;
        margin-top: -5px;
        padding-bottom: 0.5rem;
        color: #303133;
    }
    .user_table{
        margin-top: 0.5rem;
        text-align: center;
        font-size: 0.9rem;
        line-height: 0.8rem;
    }
    .condition{
        display: flex;
        justify-content: space-between;
    }
    .search-text{
        display: flex;
        align-items: center
    }
    .search-button{
        padding-right: 9rem;
    }
    .input_class{
        width: 11rem;
    }

    #out_money_num >>> .el-input__inner{
        height: 2rem;
    }
    #out_money_num >>>.el-pagination__total{
        padding-top: 0.5rem;
    }
    #out_money_num >>> .el-pagination__sizes{
        height: inherit;
    }
    #out_money_num >>> .el-pager {
        padding-top: 0.5rem;
    }
    #out_money_num >>> .btn-prev {
        position: relative;
        top: 0.5rem;
    }
    #out_money_num >>> .btn-next {
        position: relative;
        top: 0.5rem;
    }


    label{
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.8rem;
    }
    label:nth-child(1){
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.3rem;
    }
</style>

